<style scoped lang="less">
.demo-badge-alone {
  background: #3a3636 !important;
}
.badge2 {
  background: #a79f9f !important;
}
.rowAll {
  margin-bottom: 10px;
}

/* 查询对象 */

.cardQuery {
  height: 150px;
  .objContain {
    display: flex;
    .leftContain {
      flex: 0 0 40px;
      line-height: 28px;
    }
    .rightContain {
      flex: 1;
    }
  }
  .timeContain {
    display: flex;
    .leftContain {
      flex: 0 0 40px;
      line-height: 28px;
    }
    .rightContain {
      flex: 1;
    }
  }
  .queryBtnContain {
    flex: 0 0 40px;
    line-height: 28px;
    text-align: center;
  }
}
.marginBottom16 {
  margin-bottom: 15px;
}

/* chart */

.chartContainMain {
  width: 100%;
  height: 430px;
}
.chartContain {
  width: 100%;
  height: 400px;
}
.listContain {
  display: flex;
  align-items: center;
  height: 400px;
  justify-content: center;
  width: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
      list-style: none;
      padding: 10px;
      .oneContain {
        display: flex;
        .indexContain {
          flex: 0 0 50px;
          display: flex;
          justify-content: center;
          .index3 {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: #3a3636;
            text-align: center;
            color: #fff;
          }
          .index4 {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: #a79f9f;
            text-align: center;
            color: black;
          }
        }
        .nameContain {
          flex: 1;
          text-align: center;
        }
        .valueContain {
          flex: 1;
          text-align: center;
        }
      }
    }
  }
}
.singleRow {
  margin: 0 -16px;
}

</style>
<template>
  <Row>
    <!-- all统计信息 -->
    <Row :gutter="6" class="rowAll">
      <!-- 类型 -->
      <Col span="12" class="colLeft">
      <CarbonAllStatistic v-for="(item, index) in statisticAllData" :key="index" :type="'allId'+index" :param="queryTotalObj" :name="item" @typeClick="typeClick"></CarbonAllStatistic>
      </Col>
      <Col span="12" class="colRight">
      <Card class="cardQuery">
        <p slot="title"> 查询对象/查询时间 </p>
        <Row :gutter="50">
          <Col span="12">
          <div class="objContain">
            <div class="leftContain"> 对象</div>
            <div class="rightContain">
              <Cascader :data="spaceList" change-on-select @on-change="selectChange" v-model="factName" :clearable="false"> </Cascader>
            </div>
          </div>
          </Col>
          <Col span="12">
          <div class="timeContain">
            <div class="leftContain"> 时间 </div>
            <div class="rightContain">
              <DatePicker v-model="queryTotalObj.dateStr" type="date" :options="timeOptions" placeholder="选择日期" style="width: 100%;" @on-change="timeChange"></DatePicker>
              <div style="text-align:left;padding-top:4px;">
                <RadioGroup v-model="queryTotalObj.timeType" type="button" size="small" @on-change="radioChange">
                  <Radio label="全年份"></Radio>
                  <Radio label="年度"></Radio>
                  <Radio label="月度"></Radio>
                  <Radio label="日度" disabled></Radio>
                </RadioGroup>
              </div>
            </div>
          </div>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
    <!-- 单类能源碳排 -->
    <Card class="marginBottom16">
      <p slot="title"> 单类能源碳排 </p>
      <Row class="singleRow">
        <CarbonSingle v-for="(item,index) in energyTextData" :key="index" :name="item" :index="index" :param="queryTotalObj" @click.native="carbonSingleClick(item)"></CarbonSingle>
      </Row>
    </Card>
    <!-- 图 -->
    <Card class="marginBottom16">
      <Tabs :value="oneTabs.show" @on-click="tabClick">
        <TabPane label="汇总" :name="oneTabs.all">
          <Col span="12">
          <div id='idOne' class="chartContainMain"></div>
          </Col>
          <Col span='12'>
          <Tabs :value="twoTabs.show" @on-click="tabClick">
            <TabPane label="子级占比" :name="twoTabs.child">
              <Col span="12">
              <div id='idTwo' class="chartContain"></div>
              </Col>
              <Col span="12">
              <div class="listContain">
                <ul>
                  <li v-for="(item,index) in pieList" :key="'pie'+index">
                    <div class="oneContain">
                      <div class="indexContain">
                        <div v-show="index<3" class="index3"> {{index+1}} </div>
                        <div v-show="index>2" class="index4"> {{index+1}} </div>
                      </div>
                      <div class="nameContain">{{item.name}}</div>
                      <div class="valueContain">{{numberShow(item.value)}}  (kg)</div>
                    </div>
                  </li>
                </ul>
              </div>
              </Col>
            </TabPane>
            <TabPane label="类型占比" :name="twoTabs.type">
              <Col span="12">
              <div id='idTwoTwo' class="chartContain"></div>
              </Col>
              <Col span="12">
              <div class="listContain">
                <ul>
                  <li v-for="(item,index) in pieList" :key="'pie'+index">
                    <div class="oneContain">
                      <div class="indexContain">
                        <div v-show="index<3" class="index3"> {{index+1}} </div>
                        <div v-show="index>2" class="index4"> {{index+1}} </div>
                      </div>
                      <div class="nameContain">{{item.name}}</div>
                      <div class="valueContain">{{numberShow(item.value)}}  (kg)</div>
                    </div>
                  </li>
                </ul>
              </div>
              </Col>
            </TabPane>
          </Tabs>
          </Col>
        </TabPane>
        <TabPane label="单车" :name="oneTabs.car">
          <Col span="12">
          <div id='idThree' class="chartContainMain"></div>
          </Col>
          <Tabs :value="threeTabs.show" @on-click="tabClick">
            <TabPane label="子级占比" :name="threeTabs.child">
              <Col span="12">
              <div id='idFour' class="chartContain"></div>
              </Col>
              <Col span="12">
              <div class="listContain">
                <ul>
                  <li v-for="(item,index) in onePieList" :key="'onePieList'+index">
                    <div class="oneContain">
                      <div class="indexContain">
                        <div v-show="index<3" class="index3"> {{index+1}} </div>
                        <div v-show="index>2" class="index4"> {{index+1}} </div>
                      </div>
                      <div class="nameContain">{{item.name}}</div>
                      <div class="valueContain">{{numberShow(item.value)}}  (kg/台)</div>
                    </div>
                  </li>
                </ul>
              </div>
              </Col>
            </TabPane>
            <TabPane label="类型占比" :name="threeTabs.type">
              <Col span="12">
              <div id='idFourTwo' class="chartContain"></div>
              </Col>
              <Col span="12">
              <div class="listContain">
                <ul>
                  <li v-for="(item,index) in onePieList" :key="'onePieList'+index">
                    <div class="oneContain">
                      <div class="indexContain">
                        <div v-show="index<3" class="index3"> {{index+1}} </div>
                        <div v-show="index>2" class="index4"> {{index+1}} </div>
                      </div>
                      <div class="nameContain">{{item.name}}</div>
                      <div class="valueContain">{{numberShow(item.value)}}</div>
                    </div>
                  </li>
                </ul>
              </div>
              </Col>
            </TabPane>
          </Tabs>
        </TabPane>
      </Tabs>
    </Card>
  </Row>
</template>
<script>
/* eslint-disable no-multi-spaces */
import CarbonAllStatistic from './CarbonAllStatistic.vue'
import CarbonSingle from './CarbonSingle.vue'
export default {
  components: {
    CarbonAllStatistic,
    CarbonSingle
  },
  data: function () {
    let nowDate = new Date()
    let yy = nowDate.getFullYear()
    let mm = nowDate.getMonth() + 1
    let dd = nowDate.getDate()
    mm = mm > 9 ? mm : '0' + mm
    dd = dd > 9 ? dd : '0' + dd
    let toDay = yy + '-' + mm + '-' + dd
    let statisticAllData = ['汇总碳排', '单车碳排', '综合产量']
    return {
      spaceList: [],
      factName: [],
      spinShow: { all: true, single: true },
      // statisticAllData: { t1: {}, t2: {}, t3: {} }, // 汇总
      statisticData: [{}, {}, {}, {}, {}, {}], // 单能源
      statisticAllData: statisticAllData, // 汇总
      energyTextData: ['水', '电', '燃气', '蒸汽', '冷量', '压缩空气'],
      pieList: [], // 汇总饼数据
      queryTotalObj: {
        target: this.$store.state.user.spaces[0].label,
        // dateStr: nowDate.format('yyyy-MM-dd'),
        dateStr: '2016-01-19',
        timeType: '年度'
      },
      chartPartEnName: '汇总碳排', //控制第三部分 图表 的对应的能源, 默认为 汇总碳排
      timeOptions: {
        shortcuts: [{
          text: '今天',
          value() {
            const date = new Date()
            return date.format('yyyy-MM-dd')
          },
          onClick: (picker) => {}
        }, {
          text: '昨天',
          value() {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date.format('yyyy-MM-dd')
          },
          onClick: (picker) => {}
        }, {
          text: '今年',
          value() {
            const date = new Date()
            date.setTime(date.getTime())
            return date.format('yyyy-MM-dd')
          },
          onClick: (picker) => {}
        }]
      },
      factoryData: [], // 工厂数据
      oneChart: null, // 汇总碳排走势
      twoChart: null, // 汇总碳子级占比
      threeChart: null, // 单车碳排走势
      fourChart: null, // 单车碳排走势
      onePieList: [], // 单车饼数据
      oneTabs: {
        show: 'oneAll',
        all: 'oneAll',
        car: 'oneCar'
      },
      twoTabs: {
        show: 'twoChild',
        child: 'twoChild',
        type: 'twoType'
      },
      threeTabs: {
        show: 'threeChild',
        child: 'threeChild',
        type: 'threeType'
      }
    }
  },
  created: function () {
    // console.log('created')
  },
  mounted: function () {
    // 初始化空间数据
    this.getSpaceList()
    let self = this
    self.oneChart = self.$echarts.init(document.getElementById('idOne'))
    self.twoChart = self.$echarts.init(document.getElementById('idTwo'))
    self.twoTwoChart = self.$echarts.init(document.getElementById('idTwoTwo'))
    self.threeChart = self.$echarts.init(document.getElementById('idThree'))
    self.fourChart = self.$echarts.init(document.getElementById('idFour'))
    self.fourTwoChart = self.$echarts.init(document.getElementById('idFourTwo'))
    window.onresize = function () {
      self.chartResize()
    }
    // 左边菜单折叠时触发
    window.vm.$on('iconRotateClick', function (data) {
      setTimeout(function () {
        self.chartResize()
      }, 600)
    })
    // 初始化请求数据
    this.initdata()
  },
  watch: {},
  destroyed: function () {
    let self = this
    self.oneChart = null
    self.twoChart = null
    self.threeChart = null
    self.fourChart = null
    window.onresize = null
  },
  methods: {
    chartResize: function () {
      if (this.oneTabs.value === this.oneTabs.all) {
        this.oneChart.resize()
        this.twoChart.resize()
        this.twoTwoChart.resize()
      } else {
        this.threeChart.resize()
        this.fourChart.resize()
        this.fourTwoChart.resize()
      }
    },
    getSpaceList: function () {
      this.spaceList = this.$store.state.user.spaces
      this.factName = [this.spaceList[0].value]
    },
    selectChange: function (value, selectedData) {
      this.queryTotalObj.target = selectedData.map(item => item.label).join(',')
      // 加载第三部分数据
      this.loadMatchChartDatas()
    },
    timeChange: function (value) {
      if (value) {
        this.queryTotalObj.dateStr = (new Date(value.split('.')[0])).format('yyyy-MM-dd')
        // console.log('this.queryTotalObj.dateStr-------------', this.queryTotalObj.dateStr)
      }
      // 加载第三部分数据
      this.loadMatchChartDatas()
    },
    radioChange: function (value) {
      this.queryTotalObj.timeType = value
      // 加载第三部分数据
      this.loadMatchChartDatas()
    },
    doQuery: function () {
      if (this.queryTotalObj.dateStr instanceof Date) {
        this.queryTotalObj.dateStr = this.queryTotalObj.dateStr.format('yyyy-MM-dd')
      }
    },
    loadTabDatas: function () {},
    drawEcharts: function (id, option) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id))
      // 绘制图表
      myChart.setOption(option)
    },
    oneInit: function (chartData) {
      let self = this
      self.oneChart.showLoading({ text: '' })
      let option = {
        noDataLoadingOption: {
          text: '暂无数据',
          effect: 'bubble',
          effectOption: {
            effect: {
              n: 0
            }
          }
        },
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '0',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: chartData.legend
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          data: chartData.xaxis
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: chartData.legend[0],
          type: 'bar',
          barWidth: 20,
          data: chartData.yaxis[0],
          itemStyle: {
            normal: {
              color: '#169fe6'
            }
          }
        }, {
          name: chartData.legend[1],
          type: 'bar',
          barWidth: 20,
          data: chartData.yaxis[1],
          itemStyle: {
            normal: {
              color: '#ffbf00'
            }
          }
        }]
      }
      if (!self.oneChart) {
        self.oneChart = self.$echarts.init(document.getElementById('idOne'))
      }
      // 绘制图表
      self.oneChart.setOption(option)
      self.oneChart.hideLoading()
    },
    twoInit: function (chartData) {
      let self = this
      self.twoChart.showLoading({ text: '' })
      let option = {
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '20',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        series: [{
          name: '子级占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: chartData.data
        }]
      }
      if (!self.twoChart) {
        self.twoChart = self.$echarts.init(document.getElementById('idTwo'))
      }
      // 绘制图表
      self.twoChart.setOption(option)
      self.twoChart.hideLoading()
    },
    threeInit: function (chartData) {
      let self = this
      self.threeChart.showLoading({ text: '' })
      let option = {
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '0',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: chartData.legend
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          data: chartData.xaxis
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: chartData.legend[0],
          type: 'bar',
          barWidth: 20,
          data: chartData.yaxis[0],
          itemStyle: {
            normal: {
              color: '#169fe6'
            }
          }
        }, {
          name: chartData.legend[1],
          type: 'bar',
          barWidth: 20,
          data: chartData.yaxis[1],
          itemStyle: {
            normal: {
              color: '#ffbf00'
            }
          }
        }]
      }
      if (!self.threeChart) {
        self.threeChart = self.$echarts.init(document.getElementById('idThree'))
      }
      // 绘制图表
      self.threeChart.setOption(option)
      self.threeChart.hideLoading()
    },
    fourInit: function (chartData) {
      let self = this
      self.fourChart.showLoading({ text: '' })
      let option = {
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '20',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        series: [{
          name: '子级占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: chartData.data
        }]
      }
      if (!self.fourChart) {
        self.fourChart = self.$echarts.init(document.getElementById('idFour'))
      }
      // 绘制图表
      self.fourChart.setOption(option)
      self.fourChart.hideLoading()
    },
    fourTwoInit: function (chartData) {
      let self = this
      self.fourTwoChart.showLoading({ text: '' })
      let option = {
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '20',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        series: [{
          name: '类型占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: chartData.data
        }]
      }
      if (!self.fourTwoChart) {
        self.fourTwoChart = self.$echarts.init(document.getElementById('idFourTwo'))
      }
      // 绘制图表
      self.fourTwoChart.setOption(option)
      self.fourTwoChart.hideLoading()
    },
    twoTwoInit: function (chartData) {
      let self = this
      self.twoTwoChart.showLoading({ text: '' })
      let option = {
        title: {
          text: chartData.title,
          left: 'center',
          bottom: '20',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 20
        },
        calculable: true,
        series: [{
          name: '类型占比',
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          data: chartData.data
        }]
      }
      if (!self.twoTwoChart) {
        self.twoTwoChart = self.$echarts.init(document.getElementById('idTwoTwo'))
      }
      // 绘制图表
      self.twoTwoChart.setOption(option)
      self.twoTwoChart.hideLoading()
    },
    // 汇总碳排,单车碳排,综合产量
    carbon_total: function () {
      let self = this
      let postData = {
        target: self.queryTotalObj.target
        // stime: self.queryTotalObj.stime,
        // etime: self.queryTotalObj.etime
      }
      self.spinShow.all = true
      window.myapi.carbon_total(postData).then(function (res) {
        if (res.status === 200) {
          self.statisticAllData = res.data.data
        } else {
          self.$Message.error('请求数据失败!')
        }
        self.spinShow.all = false
      }).catch(function (e) {
        self.$Message.error('请求数据失败!')
        self.spinShow.all = false
      })
    },
    // 单类能源碳排
    carbon_energy: function () {
      let self = this
      let postData = {
        target: self.queryTotalObj.target
        // stime: self.queryTotalObj.stime,
        // etime: self.queryTotalObj.etime
      }
      self.spinShow.single = true
      window.myapi.carbon_energy(postData).then(function (res) {
        if (res.status === 200) {
          self.statisticData = res.data.data
        } else {
          self.$Message.error('请求数据失败!')
        }
        self.spinShow.single = false
      }).catch(function (e) {
        self.$Message.error('请求数据失败!')
        self.spinShow.single = false
      })
    },
    // 初始化数据
    initdata: function () {
      // 汇总碳排,单车碳排,综合产量
      // self.carbon_total()
      // 单类能源
      // self.carbon_energy()
      // tab显示内容初始化
      if (this.oneTabs.show === this.oneTabs.all) {
        // 汇总--碳排走势
        this.carbon_total_chart()
        // 汇总--子级对比
        this.carbonSubset()
      } else {
        // 单车--碳排走势
        this.carbon_avg_chart()
        // 单车--子级对比
        this.carbonSubset()
      }
    },
    // 查询
    query: function () {
      let self = this
      self.initdata()
    },
    // 总统计key2text
    statisticAllKeyText: function (key) {
      if (key === 't1') {
        return '汇总碳排'
      }
      if (key === 't2') {
        return '单车碳排'
      }
      if (key === 't3') {
        return '综合产量'
      }
      return ''
    },
    // 点击日期 今天，本周，本月，全年
    queryDate: function (type) {
      let self = this
      let nowDate = new Date()
      let yy = nowDate.getFullYear()
      let mm = nowDate.getMonth() + 1
      let dd = nowDate.getDate()
      let dayIndex = nowDate.getDay() // 获取当前星期X(0-6,0代表星期天)
      mm = mm > 9 ? mm : '0' + mm
      dd = dd > 9 ? dd : '0' + dd
      if (type === 'today') {
        let stime = yy + '-' + mm + '-' + dd
        let etime = stime
        self.queryTotalObj.stime = stime
        self.queryTotalObj.etime = etime
        self.queryTotalObj.daterange = [stime, etime]
        self.initdata()
      }
      if (type === 'week') {
        let stime = self.week2range(dayIndex)
        let etime = yy + '-' + mm + '-' + dd
        self.queryTotalObj.stime = stime
        self.queryTotalObj.etime = etime
        self.queryTotalObj.daterange = [stime, etime]
        self.initdata()
      }
      if (type === 'month') {
        let stime = yy + '-' + mm + '-01'
        let etime = yy + '-' + mm + '-' + dd
        self.queryTotalObj.stime = stime
        self.queryTotalObj.etime = etime
        self.queryTotalObj.daterange = [stime, etime]
        self.initdata()
      }
      if (type === 'year') {
        let stime = yy + '-01-01'
        let etime = yy + '-' + mm + '-' + dd
        self.queryTotalObj.stime = stime
        self.queryTotalObj.etime = etime
        self.queryTotalObj.daterange = [stime, etime]
        self.initdata()
      }
    },
    // 本周的范围
    week2range: function (index) {
      let self = this
      let nowDate = new Date()
      let ts = nowDate.getTime() // 毫秒数
      if (index === 0) {
        // index === 0是周日
        let mondayTS = ts - 6 * 24 * 60 * 60 * 1000
        let stime = self.timestamp2Time(mondayTS)
        return stime
      }
      if (index > 0) {
        let mondayTS = ts - (index - 1) * 24 * 60 * 60 * 1000
        let stime = self.timestamp2Time(mondayTS)
        return stime
      }
    },
    // 解析时间戳
    timestamp2Time: function (timestamp) {
      let nowDate = new Date(timestamp)
      let yy = nowDate.getFullYear()
      let mm = nowDate.getMonth() + 1
      let dd = nowDate.getDate()
      mm = mm > 9 ? mm : '0' + mm
      dd = dd > 9 ? dd : '0' + dd
      return yy + '-' + mm + '-' + dd
    },
    // 查询参数处理标准化
    paramsDeel: function () {
      if (this.queryTotalObj.dateStr instanceof String) {
        if (this.queryTotalObj.dateStr.indexOf('.') > -1) {
          this.queryTotalObj.dateStr = (new Date(this.queryTotalObj.dateStr.split('.')[0])).format('yyyy-MM-dd')
        } else {
          this.queryTotalObj.dateStr = (new Date(this.queryTotalObj.dateStr)).format('yyyy-MM-dd')
        }
      }
      if (this.queryTotalObj.dateStr instanceof Object) {
        this.queryTotalObj.dateStr = (new Date(this.queryTotalObj.dateStr)).format('yyyy-MM-dd')
      }
      // 防止子组件的params陷入死循环
      let tem = JSON.parse(JSON.stringify(this.queryTotalObj))
      tem.enName = this.chartPartEnName
      return tem
    },
    // 汇总--碳排走势using
    carbon_total_chart: function () {
      let postData = this.paramsDeel()
      this.oneChart.showLoading({ text: '' })
      window.myapi.do_post('$carbon/trend', postData).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.oneInit(resp.data.data)
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).finally(() => {
        this.oneChart.hideLoading()
      })
    },
    // 汇总--类型占比
    carbon_total_type_chart: function () {
      let postData = this.paramsDeel()
      this.twoTwoChart.showLoading({ text: '' })
      window.myapi.do_post('$carbon/carbonType', postData).then(res => {
        if (res.status === 200) {
          this.pieList = res.data.data.data
          this.twoTwoInit(res.data.data)
        } else {
          this.$Message.error('请求数据失败!')
        }
        this.twoChart.hideLoading()
      }).catch(function (e) {
        this.$Message.error('请求数据失败!')
        this.twoTwoChart.hideLoading()
      })
    },
    // 单车--碳排走势
    carbon_avg_chart: function () {
      let postData = this.paramsDeel()
      this.threeChart.showLoading({ text: '' })
      window.myapi.do_post('$carbon/trendAvg', postData).then(res => {
        if (res.status === 200) {
          this.threeInit(res.data.data)
        } else {
          this.$Message.error('请求数据失败!')
        }
        this.threeChart.hideLoading()
      }).catch(function (e) {
        this.$Message.error('请求数据失败!')
        this.threeChart.hideLoading()
      })
    },
    // 单车--子级对比
    carbon_avg_sublevel_chart: function () {
      let postData = this.paramsDeel()
      this.fourChart.showLoading({ text: '' })
      window.myapi.do_post('/$carbon/avgSubset', postData).then(res => {
        if (res.status === 200) {
          this.onePieList = res.data.data.data
          this.fourInit(res.data.data)
          // 新加的
          this.fourTwoInit(res.data.data)
        } else {
          this.$Message.error('请求数据失败!')
        }
        this.fourChart.hideLoading()
      }).catch(function (e) {
        this.$Message.error('请求数据失败!')
        this.fourChart.hideLoading()
      })
    },
    // 汇总--子级对比
    carbonSubset: function () {
      let postData = this.paramsDeel()
      this.fourChart.showLoading({ text: '' })
      window.myapi.do_post('$carbon/subset', postData).then(res => {
        if (res.status === 200) {
          if (this.oneTabs.show === this.oneTabs.all) {
            // 汇总子级
            this.pieList = res.data.data.data
            this.twoInit(res.data.data)
            // 新加的
            this.twoTwoInit(res.data.data)
          } else {
            // 单车子级
            this.onePieList = res.data.data.data
            this.fourInit(res.data.data)
            // 新加的
            this.fourTwoInit(res.data.data)
          }
        } else {
          this.$Message.error('请求数据失败!')
        }
        this.fourChart.hideLoading()
      }).catch(function (e) {
        if (e) {
          this.$Message.error('请求数据失败!')
          this.fourChart.hideLoading()
        }
      })
    },
    // parentClick
    parentClick: function () {
      console.log(1)
    },
    // 大数字 千分位显示
    numberShow: function (number) {
      return this.$utils.numberShow(number)
    },
    // 单类单击
    carbonSingleClick: function (name) {
      this.chartPartEnName = name
      this.loadMatchChartDatas()
    },
    // 类型单击是哪一个
    typeClick: function (name) {
      // 把当前 显示的第三部分 数据类型记录
      this.chartPartEnName = name
      // t1: {}, t2: {}, t3: {}'汇总碳排', '单车碳排'
      if (name === '汇总碳排') {
        // 汇总碳排
        this.oneTabs.show = this.oneTabs.all
        this.twoTabs.show === 'twoChild'
        // this.tabClick(this.oneTabs.show)
      }
      if (name === '单车碳排') {
        // 单车单排
        this.oneTabs.show = this.oneTabs.car
        this.threeTabs.show === 'threeChild'
        // this.tabClick(this.oneTabs.show)
      }
      if (name === '综合产量') {
        // 综合产量
      }
      // 加载 第三部分数据
      this.loadMatchChartDatas()
    },
    // tabClick
    tabClick: function (name) {
      console.log('tabName', name);
      // 不能已显示的 再请求数据
      // 点击 汇总tab，子级恢复默认第一级并且加载数据
      if (name.indexOf('oneAll') > -1 && this.oneTabs.show !== name) {
        this.oneTabs.show = name
        this.twoTabs.show = 'twoChild'
        // 汇总--碳排走势
        this.carbon_total_chart()
        // 汇总 子级
        this.carbonSubset()
      }
      // 点击 单车   子级恢复默认第一级并且加载数据
      if (name.indexOf('oneCar') > -1 && this.oneTabs.show !== name) {
        this.oneTabs.show = name
        this.threeTabs.show = 'threeChild'
        // 单车--碳排走势
        this.carbon_avg_chart()
        // 单车--子级对比
        this.carbon_avg_sublevel_chart()
      }
      // twoTabs当前需要请求数据
      if (name.indexOf('two') > -1 && this.twoTabs.show !== name) {
        this.twoTabs.show = name
        if (this.twoTabs.show !== this.twoTabs.child) {
          // 汇总类型占比
          console.log('进行 汇总 类型占比 请求')
          this.carbon_total_type_chart()
        } else {
          // 子类占比
          console.log('进行 汇总 子类占比 请求')
          // 汇总 子级
          this.carbonSubset()
        }
      }
      // threeTabs当前需要请求数据
      if (name.indexOf('three') > -1 && this.threeTabs.show !== name) {
        this.threeTabs.show = name
        if (this.threeTabs.show !== this.threeTabs.child) {
          // 类型占比
          console.log('进行 单车 类型占比 请求')
          console.log('进行 汇总 类型占比 请求')
          // this.carbon_total_type_chart()
        } else {
          // 子类占比
          console.log('进行 单车 子类占比 请求')
          // 汇总 子级
          this.carbon_avg_sublevel_chart()
        }
      }
    },
    // 加载chart数据
    loadMatchChartDatas: function () {
      // 汇总
      if (this.oneTabs.show === this.oneTabs.all) {
        console.log('汇总---------')
        // 汇总--碳排走势
        this.carbon_total_chart()
        if (this.twoTabs.show === this.twoTabs.child) {
          console.log('汇总 子级占比---------')
          // 汇总 子级
          this.carbonSubset()
        } else {
          console.log('汇总 类型占比---------')
          // 汇总类型占比
          this.carbon_total_type_chart()
        }
      }
      // 单车
      if (this.oneTabs.show === this.oneTabs.car) {
        console.log('单车---------')
        // 单车--碳排走势
        this.carbon_avg_chart()
        if (this.threeTabs.show === this.threeTabs.child) {
          console.log('单车 子级占比---------')
          // 单车 子级
          this.carbon_avg_sublevel_chart()
        } else {
          console.log('单车 类型占比---------')
        }
      }
    }
  }
}

</script>
